<template>
  <div class="Singerdetails">
    <div class="main">
      <div class="imglist">
        <img :src="artist.img1v1Url" alt="图片加载中~~~">
        <div style="margin-left:20px;">
          <p style="font-size:30px;font-weight:900;">{{artist.name}}</p>
          <span style="font-size:13px;font-weight:300;margin-top: 7px;" v-for="(item,index) in artist.alias" :key="index">{{item}}</span>
          <div class="sc">
            <i class="iconfont icon-shoucang"></i>
            <span style="margin-left:5px;opacity: 0.8;">收藏</span>
          </div>
          <div style="margin-top:15px;font-size: 13px;opacity: 0.7;">
            <span style="margin-right:30px;">单曲数:{{artist.musicSize}}</span>
            <span style="margin-right:30px;">专辑数:{{artist.albumSize}}</span>
            <span>MV数:{{artist.mvSize}}</span>
          </div>

        </div>
      </div>
      <div style="display: flex;margin-top: 40px;" class="Songlist">
        <span @click="getshow(index)" class="b" v-for="(item,index) in arrlist" :key="index" style="margin-right:20px;" :class="show==index?'p':''">{{item}}</span>
      </div>
    </div>

    <div style="" class="specialalbum">
      <specialalbum v-if="show==0" />
      <MV v-else-if="show==1" />
      <Singerdetails1 v-else-if="show==2" />
      <Similarsinger v-else-if="show=3" />
      <!-- <router-view /> -->
    </div>

  </div>
</template>

<script>
import specialalbum from '@/components/Home/Singer/specialalbum.vue'
import MV from '@/components/Home/Singer/MV.vue'
import Singerdetails1 from '@/components/Home/Singer/Singerdetails1.vue'
import Similarsinger from '@/components/Home/Singer/Similarsinger.vue'
import { mapState } from 'vuex'
export default {
  name: 'Singerdetails',
  data() {
    return {
      artist: {},
      arrlist: ['专辑', 'MV', '歌手详情', '相似歌手'],
      show: 0
    }
  },
  components: {
    specialalbum,
    MV,
    Singerdetails1,
    Similarsinger
  },
  computed: {
    ...mapState({
      singerlist: state => state.Singger.singerlist
    })
  },
  methods: {
    //更换列表
    getshow(e) {
      this.show = e
      // if(e==0){
      //   this.$router.push({path:'/home/Singerdetails/specialalbum'})
      // }
    }
  },
  mounted() {
    // this.$store.dispatch('getGetsingerdetails', { id: this.$route.query.id })
    // this.$router.push({ path: '/home/Singerdetails/specialalbum' })
  },
  watch: {
    singerlist: {
      handler(v, o) {
        this.artist = v.artist
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Singerdetails {
  margin-top: 30px;
  margin-left: -100px;
  .main {
    .imglist {
      display: flex;
      img {
        width: 200px;
        height: 200px;
        border-radius: 5px;
      }
      .sc {
        width: 70px;
        display: flex;
        padding: 3px 10px;
        justify-content: center;
        align-items: center;
        border: 1px solid #5f5f5f;
        border-radius: 20px;
        margin-top: 15px;
      }
      .sc:hover {
        background-color: aliceblue;
        cursor: pointer;
      }
    }
    .Songlist {
      .p {
        font-size: 18px;
        font-weight: 900;
        opacity: 1;
      }
    }
    .b {
      opacity: 0.7;
    }
    .b:hover {
      cursor: pointer;
      opacity: 1;
    }
  }
  .specialalbum {
    overflow: auto;
    overflow: hidden;
  }
  .specialalbum::-webkit-scrollbar {
    display: none;
  }
}
</style>